<template>
	<view class="contentBox">
		<view class="font-14 textsl1   radius-5" style="color: gray;" @click="showAddress=true">
			{{province+city+area+street||'请选择地址'}}
		</view>
		<view class="addressBox" v-if="showAddress">
			<view class="box">
				<view class="font-16 font-weight-1000 text-center padding-15" style="position: relative;">
					请选择
					<uni-icons @click="close" type="closeempty" class="iconColor" size="20"
						style="position: absolute;right: 20px;"></uni-icons>
				</view>
				<view class="flex text-center font-16">
					<view class="width-25 " @click="setCurrent(0)">
						<view class="textsl1">
							{{province||'选择省'}}
						</view>
						<view class="mt-5" :class="{active:current==0}"></view>
					</view>
					<view class="width-25" @click="setCurrent(1)" v-if="province">
						<view class="textsl1">
							{{city||'选择市'}}
						</view>
						<view class="mt-5" :class="{active:current==1}"></view>
					</view>
					<view class="width-25" @click="setCurrent(2)" v-if="city">
						<view class="textsl1">
							{{area||'选择区'}}
						</view>
						<view class="mt-5" :class="{active:current==2}"></view>
					</view>
					<view class="width-25" @click="setCurrent(3)" v-if="area&&isStreet">
						<view class="textsl1">
							{{street||'选择街道'}}
						</view>
						<view class="mt-5" :class="{active:current==3}"></view>
					</view>
				</view>
				<view class="font-16 flex">
					<scroll-view v-if="current==0" scroll-y="true" class="padding-15"
						style="height: calc(70vh - 50px);">
						<view class="padding-5 flex justify-between align-center" v-for="(item,index) in provinceList"
							:key="index" @click="setProvince(item.province)">
							{{item.province}}
							<uni-icons v-if="item.province==province" type="checkmarkempty" class="iconColor"
								color="#F4391C" size="20"></uni-icons>
						</view>
					</scroll-view>
					<scroll-view v-if="current==1" scroll-y="true" class="padding-15"
						style="height: calc(70vh - 50px);">
						<view class="padding-5 flex justify-between align-center" v-for="(item,index) in cityList"
							:key="index" @click="setCity(item.city)">
							{{item.city}}
							<uni-icons v-if="item.city==city" type="checkmarkempty" class="iconColor" color="#F4391C"
								size="20"></uni-icons>
						</view>
					</scroll-view>
					<scroll-view v-if="current==2" scroll-y="true" class="padding-15"
						style="height: calc(70vh - 50px);">
						<view class="padding-5 flex justify-between align-center" v-for="(item,index) in areaList"
							:key="index" @click="setArea(item.area)">
							{{item.area}}
							<uni-icons v-if="item.area==area" type="checkmarkempty" class="iconColor" color="#F4391C"
								size="20"></uni-icons>
						</view>
					</scroll-view>
					<scroll-view v-if="current==3" scroll-y="true" class="padding-15"
						style="height: calc(70vh - 50px);">
						<view class="padding-5 flex justify-between align-center" v-for="(item,index) in streetList"
							:key="index" @click="setStreet(item.street)">
							{{item.street}}
							<uni-icons v-if="item.street==street" type="checkmarkempty" class="iconColor"
								color="#F4391C" size="20"></uni-icons>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "selectAddress",
		props: {
			isStreet: {
				type: Boolean,
				default: true,
			}, //街道
			address: {
				type: Object,
				require: true,
				default: () => ({
					province: '',
					city: '',
					area: '',
					street: ''
				})
			}
		},
		data() {
			return {
				showAddress: false,
				current: 0,
				provinceList: '', //省列表
				cityList: '', //市列表
				areaList: '', //区列表
				streetList: '', //街道列表
				province: '', //省
				city: '', //市
				area: '', //区
				street: '', //街道
			};
		},
		mounted() {
			if (this.address.province) {
				this.province = this.address.province
			}
			if (this.address.city) {
				this.city = this.address.city
			}
			if (this.address.area) {
				this.area = this.address.area
			}
			if (this.address.street) {
				this.street = this.address.street
			}
			this.request()
		},
		methods: {
			setCurrent(index) {
				if (this.current != index) {
					console.log(index)
					this.current = index
				}
			},
			close() {
				this.showAddress = false
				this.$emit('change', this.address)
			},
			reset() {
				this.province = ''
				this.city = ''
				this.area = ''
				this.street = ''
			},

			request() { //全局接口请求
				uni.request({
					url: 'https://toolapi.guanxikeji.com/admin/systemAddress/',
					method: 'GET',
					success: res => {
						console.log(res.data.data.data)

						this.provinceList = JSON.parse(this.$decrypt(res.data.data)).data

						if (this.address.province) {
							this.setProvinces(this.address.province)
						}
					},
					fail(e) {
						console.log(e)
					}
				});
			},
			setProvince(name) {
				this.province = name
				this.city = ''
				this.area = ''
				this.street = ''
				uni.request({
					url: `https://toolapi.guanxikeji.com/admin/systemAddress/?province=${name}`,
					method: 'GET',
					success: res => {
						console.log(res.data.data.data)
						this.cityList = JSON.parse(this.$decrypt(res.data.data)).data
						this.current = 1
						if (this.address.city && this.address.city == this.city) {
							this.setCity(this.address.city)
						}
					},
					fail(e) {
						console.log(e)
					}
				});
			},
			setCity(name) {
				this.city = name
				this.area = ''
				this.street = ''
				uni.request({
					url: `https://toolapi.guanxikeji.com/admin/systemAddress/?province=${this.province}&city=${name}`,
					method: 'GET',
					success: res => {
						console.log(res.data.data.data)
						this.areaList = JSON.parse(this.$decrypt(res.data.data)).data
						this.current = 2
						if (this.address.area && this.address.area == this.area) {
							this.setArea(this.address.area)
						}
					},
					fail(e) {
						console.log(e)
					}
				});
			},
			setArea(name) {
				this.area = name
				this.street = ''
				uni.request({
					url: `https://toolapi.guanxikeji.com/admin/systemAddress/?province=${this.province}&city=${this.city}&area=${name}`,
					method: 'GET',
					success: res => {

						this.streetList = JSON.parse(this.$decrypt(res.data.data)).data
						console.log(JSON.parse(this.$decrypt(res.data.data)))
						if (this.isStreet) {
							this.current = 3
							if (this.address.street && this.address.street == this.street) {
								this.setStreet(this.address.street)
							}
						} else {
							this.showAddress = false
							this.$emit('change', {
								province: this.province,
								city: this.city,
								area: this.area
							})
						}

					},
					fail(e) {
						console.log(e)
					}
				});
			},
			setStreet(name) {
				this.street = name
				this.showAddress = false
				this.$emit('change', {
					province: this.province,
					city: this.city,
					area: this.area,
					street: this.street
				})
			},
			setProvinces(name) {
				this.province = name
				uni.request({
					url: `https://toolapi.guanxikeji.com/admin/systemAddress/?province=${name}`,
					method: 'GET',
					success: res => {

						this.cityList = JSON.parse(this.$decrypt(res.data.data)).data

						this.current = 1
						if (this.address.city) {
							this.setCitys(this.address.city)
						}
					},
					fail(e) {
						console.log(e)
					}
				});
			},
			setCitys(name) {
				this.city = name
				uni.request({
					url: `https://toolapi.guanxikeji.com/admin/systemAddress/?province=${this.address.province}&city=${name}`,
					method: 'GET',
					success: res => {
						console.log(res.data.data.data)
						this.areaList = JSON.parse(this.$decrypt(res.data.data)).data
						this.current = 2
						if (this.address.area && this.address.area == this.area) {
							this.setAreas(this.address.area)
						}
					},
					fail(e) {
						console.log(e)
					}
				});
			},
			setAreas(name) {
				this.area = name
				uni.request({
					url: `https://toolapi.guanxikeji.com/admin/systemAddress/?province=${this.address.province}&city=${this.address.city}&area=${name}`,
					method: 'GET',
					success: res => {
						this.streetList = JSON.parse(this.$decrypt(res.data.data)).data

						if (this.isStreet) {
							this.current = 3
							if (this.address.street) {
								this.setStreets(this.address.street)
							}
						}

					},
					fail(e) {
						console.log(e)
					}
				});
			},
			setStreets(name) {
				this.street = name
			},
		}
	}
</script>

<style scoped lang="scss">
	.addressBox {
		background: rgba(0, 0, 0, .5);
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999999999;

		.box {
			position: fixed;
			width: 100vw;
			height: 70vh;
			left: 0;
			bottom: 0;
			background-color: #fff;
			padding-bottom: 100px;
			border-radius: 15px 15px 0 0;
		}

		.active {
			width: 50%;
			height: 4px;
			background-color: #F4391C;
			margin-left: 25%;
			border-radius: 2px;
		}
	}

	@for $i from 1 through 100 {
		$value: $i*1px;
		$values: $i*10;
		$valuess: $i*1%;

		//边框弧度
		.radius-#{$i} {
			border-radius: $value;

		}

		.width-#{$i} {
			width: $valuess;
		}

		// 外边距
		.mt-#{$i} {
			margin-top: $value;
		}

		.mb-#{$i} {
			margin-bottom: $value;
		}

		.ml-#{$i} {
			margin-left: $value;
		}

		.mr-#{$i} {
			margin-right: $value;
		}

		.mrgin-#{$i} {
			margin-top: $value;
			margin-bottom: $value;
			margin-left: $value;
			margin-right: $value;
		}

		// 内填充
		.pt-#{$i} {
			padding-top: $value;
		}

		.pb-#{$i} {
			padding-bottom: $value;
		}

		.pl-#{$i} {
			padding-left: $value;
		}

		.pr-#{$i} {
			padding-right: $value;
		}

		.padding-#{$i} {
			padding-top: $value;
			padding-bottom: $value;
			padding-left: $value;
			padding-right: $value;
		}

		// 字体
		.font-#{$i} {
			font-size: $value;
		}

		// 行高
		.line-height-#{$i} {
			line-height: $value;
		}

		// 字重
		.font-weight-#{$values} {
			font-weight: $values;
		}
	}

	// 弹性盒子
	.flex {
		display: flex;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.align-center {
		align-items: center;
	}

	.flex-direction {
		flex-direction: column;
	}


	// 文字对齐方式
	.text-center {
		text-align: center;
	}

	.text-left {
		text-align: left;
	}

	.text-right {
		text-align: right;
	}

	// 文字溢出隐藏显示省略号
	@for $i from 1 through 5 {
		.textsl#{$i} {
			/*文本超过$i行展示...*/
			display: -webkit-box;
			-webkit-line-clamp: $i;
			-webkit-box-orient: vertical;
			overflow: hidden;
			/*文本超过$i行展示...*/
		}
	}
</style>